import React, { Fragment } from "react";
import { C1 } from "./C1";
import { chartsStore } from "./store";

export default class Charts extends React.Component{
  public state:{charts:any[]} = {
    charts : []
  }

  public componentDidMount(){
    chartsStore.subscribe(({leftTop, width, height}) => {
      const charts = [{
        name: 'C1',
        style: {left: leftTop[0], top: leftTop[1],width,height }
      }]
      localStorage.setItem('charts', JSON.stringify(charts))
      this.setState({
        charts
      })
    })
  }

  public getCmp(name:string):any{
    if (name === 'C1') {
      return C1
    }
    
  }

  public render(){
    return (
      <Fragment>
        {this.state.charts.map(c => {
          const C = this.getCmp(c.name)
          return <C style={c.style} key={name} />
        })}
      </Fragment>
    )
  }
}